实战案例:横向和纵向的三级下拉菜单需要掌握hover |
您所在的位置：网站首页 › html 横向菜单 › 实战案例:横向和纵向的三级下拉菜单需要掌握hover |
实战案例:横向和纵向的三级下拉菜单需要掌握hover
|
实战案例:横向和纵向的三级下拉菜单需要掌握hover
三级下拉
一. 横向三级
二.纵向三级
1.两个ul绝对定位做横向(推荐)
2.两个ul相对定位做竖向(推荐)
3.两个ul绝对定位配合li相对定位做竖向
两个ul相对定位做横向
三级下拉
类似二级下拉,在二级下拉的基础上配合定位的属性再添加一层. 一. 横向三级
此时的二级菜单有绝对定位,所以三级菜单会以二级菜单为参照物,如果不设置宽度三级菜单会出现折行的现象,所以需要给三级菜单一个宽度303px实现横向,或101px实现二级横向,三级竖向. *{ margin: 0; padding: 0;} a{ text-decoration: none; } ul{ list-style: none; text-align: center; height: 30px; } .one{ margin: 0 auto; margin-bottom: 300px; width: 404px; } li{ width: 101px; height: 30px; background-color: tomato; line-height: 30px; float: left; } a{ display: block; width: 101px; height: 30px; color: white; } .two,.three{ display:none } /* 二级三级下拉菜单默认隐藏 */ .one>li:hover .two{ display: block; } /* 当鼠标滑过一级菜单li时,二级菜单出现. */ .two{ position: absolute; } .three{ position: absolute; } /* ! 两个都用绝对做横向 */ .two li{ background: blue; } .three li{ background: blueviolet; } /* !给二级菜单和三级菜单背景 */ .two>li:hover .three{ display: block; width: 303px; } /* !当鼠标滑过二级li时,三级菜单显示 */ /* 此时的二级菜单有绝对定位,所以三级菜单会以二级菜单为参照物,如果不设置宽度三级菜单会出现折行的现象. */ a:hover{ background: violet; color: black; text-decoration: underline; } .two a:hover{ background: rgb(27, 199, 70); color: rgb(211, 119, 119); } .three a:hover{ background: rgb(223, 219, 31); color: rgb(10, 19, 9); } 2.两个ul相对定位做竖向(推荐)只需将上面的代码去掉给三级ul的宽度 将二级菜单和三级菜单改变以下属性即可. .two{ position: relative; } .three{ position: relative; left: 101px; top: -30px; width: 101px; } 3.两个ul绝对定位配合li相对定位做竖向由于二级的ul有绝对定位,所以三级的ul会首先以二级的ul为参照物,造成三级菜单不会跟着鼠标滑动改变位置.所以需要将二级的li做绝对定位参照物. .two { position: absolute; width: 101px; } .two li { position: relative; } .three { position: absolute; left: 101px; top: 0; } 两个ul相对定位做横向只需在两个ul相对定位做竖向的基础上,给二级和三级的ul增加一个宽度303px的属性即可. 三级下拉菜单的html代码 一级 二级 |
文章最后后附三级下拉菜单的html代码.【本文地址】
今日新闻 |
推荐新闻 |